<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/css/index.css" type="text/css">
    <script src="/js/vue.js"></script>
    <script src="/js/axios.min.js"></script>
    <script src="/js/qs.min.js"></script>
    <script src="/js/index.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.16/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div id="close">
    <el-input v-model="freightId" placeholder="请输入运货编号" style="width: 200px;"></el-input>
    <el-button type="primary" icon="el-icon-search" @click="selectFreightId">搜索</el-button>
    <div style="margin-top: 5px">已结算{{ countStatusY }}条,未结算{{countStatusN}}条 </div>
    <el-dialog title="结算金额" :visible.sync="dialogFormVisible">
        <el-form :model="Settlement">
            <el-form-item label="物流公司">
                <el-select v-model="testA" placeholder="请选择物流公司">
                    <el-option
                            v-for="log in TLogistics"
                            :value="log.logisticsId"
                            :label="log.logisticsName"
                    >
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="物流方式">
                <el-select v-model="testB" placeholder="请选择物流方式">
                    <el-option label="区域一" value="shanghai"></el-option>
                    <el-option label="区域二" value="beijing"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="运货单号">
                <el-input v-model="Settlement.freightId" autocomplete="off" style="width: 400px"></el-input>
            </el-form-item>
            <el-form-item label="货物种类">
                <el-input v-model="Settlement.tshipping.order.commodity.pmaterial" autocomplete="off" style="width: 400px"></el-input>
            </el-form-item>
            <el-form-item label="订单编号">
                <el-input v-model="Settlement.tshipping.order.orderId" autocomplete="off" style="width: 400px"></el-input>
            </el-form-item>
            <el-form-item label="数量" style="margin-left: 28px">
                <el-input v-model="Settlement.tshipping.order.number" autocomplete="off" style="width: 400px"></el-input>
            </el-form-item>
            <el-form-item label="出发地" style="margin-left: 14px">
                <el-input v-model="Settlement.tshipping.startPlace" autocomplete="off" style="width: 400px"></el-input>
            </el-form-item>
            <el-form-item label="目的地" style="margin-left: 14px">
                <el-input v-model="Settlement.tshipping.endPlace" autocomplete="off" style="width: 400px"></el-input>
            </el-form-item>
            <el-form-item label="货物重量" >
                <el-input value="60" autocomplete="off" style="width: 400px"></el-input>
            </el-form-item>
            <el-form-item label="货物体积">
                <el-input value="100" autocomplete="off" style="width: 400px"></el-input>
            </el-form-item>
            <el-form-item label="结算金额">
                <el-input v-model="Settlement.tshipping.order.money" autocomplete="off" style="width: 400px"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="update(Settlement.freightId)">确 定</el-button>
        </div>
    </el-dialog>

    <el-table
            :data="Settlements"
            style="width: 100%">
        <el-table-column
                label="序号">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.settlementId }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="运货单号">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.freightId }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="货物类别">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.tshipping.order.commodity.pmaterial }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="出发地">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.tshipping.startPlace }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="目的地">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.tshipping.endPlace }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="运送距离">
            <template slot-scope="scope">
                <span style="margin-left: 10px">500</span>
            </template>
        </el-table-column>
        <el-table-column
                label="货物重量">
            <template slot-scope="scope">
                <span style="margin-left: 10px">60</span>
            </template>
        </el-table-column>
        <el-table-column
                label="货物体积">
            <template slot-scope="scope">
                <span style="margin-left: 10px">100</span>
            </template>
        </el-table-column>
        <el-table-column
                label="结算状态">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.settlementStatus }}</span>
            </template>
        </el-table-column>

        <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button
                        size="mini"
                        @click="handleEdit(scope.$index, scope.row)">结算</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination
            background
            layout="prev, pager, next"
            :total="total"
            :page-size="pageSize"
            :current-page="current"
            @current-change="loadClose">
    </el-pagination>
</div>
</body>
<script>
    new Vue({
        el:"#close",
        data(){
            return{
                Settlements:[],//查询所有物流结算
                TLogistics:[],//物流公司
                total:0,
                pageSize:10,
                current:0,
                freightId:'',
                countStatusY:0,
                countStatusN:0,
                Settlement:{freightId:0,settlementId:0,settlementStatus:"",
                    tshipping:{id:0,orderNumber:0,shippingNumber:0,shippingMethodId:1,
                        shippingTruckId:0,shippingDate:"",driverId:0,
                        startPlace:"",endPlace:"",
                        order:{
                            commodity:{
                                astatus: "",
                                companyId: 0,
                                id: 0,
                                paddtime: "",
                                pbrand: "",
                                penterprise: "",
                                pimg: "",
                                plocal: "",
                                pmaterial: "",
                                pname: "",
                                pnumber: 0,
                                pprice: 0,
                                pquality: "",
                                pshelflife: "",
                                pstatus: ""
                            },
                            customId:0,dealTime:"",explain:"",id:0,laserCode:"",money:0,number:0,
                            operator:"",orderId:0,orderStatus:"",orderType:"",pEnterprise:"",
                            pName:"",payType:"",printer:"",productId:0,productLineId: "",
                            productPlanNo: "", productPlanOvertime: "", productPlanTime: "",
                            productStatus: "", productTime: "",
                            productionLine: {
                                id: 0,
                                num: 0,
                                operator: null,
                                principal: "",
                                productionCapacity: "",
                                productionName: "",
                                remark: "",
                                state: ""
                            },
                            productionName: null, remark: ""}}},
                dialogFormVisible:false,
                testA:null,
                testB:null,

            }
        },
        methods:{
            loadCountY(){
                axios.get("/settlement/" + "已结算")
                    .then(res => {
                        this.countStatusY = res.data;
                    })
            },
            update(id){
                axios.put("/settlement/" + id)
                    .then(res => {
                        this.dialogFormVisible = false;
                        this.loadClose(1,10);
                        this.loadCountY();
                        this.loadCountN();
                    })
            },
            loadCountN(){
                axios.get("/settlement/" + "未结算")
                    .then(res => {
                        this.countStatusN = res.data;
                    })
            },
            selectFreightId(){
                if(this.freightId == ''){
                    this.loadClose(1,10);
                }else {
                    this.loadNumber(1,10,this.freightId);
                }
            },
            loadNumber(current,pageSize){
                let freightId = this.freightId;
                axios.get("/settlement/" + current + "/" + pageSize + "/" + freightId)
                    .then(res => {
                        this.Settlements = res.data.records;
                        console.log(this.Settlements);
                        this.total = res.data.total;
                        this.current = res.data.current;
                    })
            },
            loadClose(current,pageSize){
                axios.get("/settlement/" + current + "/" +pageSize)
                    .then(res => {
                        this.Settlements = res.data.records;
                        this.total = res.data.total;
                        this.current = res.data.current;
                    })
            },
            loadTLogistics(){
                axios.get("/TLogisticsDriver")
                    .then(res => {
                        this.TLogistics = res.data;
                        console.log(this.TLogistics);
                    })
            },
            handleEdit(index, row) {
                this.Settlement = JSON.parse(JSON.stringify(row));
                this.dialogFormVisible = true;
            }
        },
        mounted(){
            this.loadClose(1,10);
            this.loadTLogistics();
            this.loadCountY();
            this.loadCountN();
        }
    })
</script>
</html>